<template>
  <!-- <div :id="id"
       :class="className"
       :style="{height:height,width:width}"> -->
  <div id="office">
    <div id="container"
         :style="{height:height,width:width}">
    </div>
  </div>

  <!-- </div> -->
</template>

<script>
import resize from './mixins/resize'
import Vue from 'vue'
// import { parseTime } from '@/utils'
import { debounce } from '@/utils'
import mapData from '@/constants/Map.constants'
import tagInfo from '@/components/Map/TagInfo'
import { isEqual } from '@/utils'
import * as Three from 'three/build/three.module.js'
import Stats from 'three/examples/jsm/libs/stats.module.js'
// import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js'
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {
  CSS2DRenderer,
  CSS2DObject
} from 'three/examples/jsm/renderers/CSS2DRenderer.js'
export default {
  // name: 'MapThree',
  mixins: [resize],
  // components: { tagInfo },

  props: {
    className: {
      type: String,
      default: 'MapThree'
    },
    id: {
      type: String,
      default: 'MapThree'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    show3D: {
      type: Boolean
    },
    tagInfo: {
      type: Array
    },
    tabsInfo: {
      type: Object
    },
    warningInfo: {
      type: Object
    },
    tagPosition: {
      type: Array
    }
  },
  data() {
    return {
      activeCollapseName: ['1'],
      activeName: 'error',
      camera: null,
      scene: null,
      renderer: null,
      rafID: null,
      labelRenderer: null,
      stats: null,
      controls: null,
      controls2: null,
      group: null,
      group2: null,
      clock: new Three.Clock(),
      animationAction: [],
      name: [],
      PositionTS: '',
      // isSliderActive: false,
      positionTracks: [],
      mixerTrack: null,
      animationTrack: null,
      sphereInter: null,
      raycaster: null,
      mouse: null,
      container: null,
      timeOutLoading: 0
    }
  },
  methods: {
    handleResize() {
      let result = debounce(() => {
        if (this.show3D && this.scene) {
          this.animate()
          console.log(window.innerWidth)
          console.log(this.labelRenderer.getSize())
          this.camera.aspect = window.innerWidth / window.innerHeight
          // this.camera.aspect =
          //   this.container.clientWidth / this.container.clientHeight
          this.camera.updateProjectionMatrix()
          // this.renderer.setSize(window.innerWidth, window.innerHeight)
          this.renderer.setSize(
            this.container.clientWidth,
            this.container.clientHeight
          )
          this.labelRenderer.setSize(
            this.container.clientWidth,
            this.container.clientHeight
          )
          // this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
        }
      }, 100)
      return result
    },
    // handleTrackRemove() {
    //   for (let i in this.animationAction) {
    //     this.animationAction[i].getRoot().visible = true
    //   }
    //   this.isSliderActive = false
    //   this.PositionTS = null
    //   this.picker_disabled = false
    //   this.activeCollapseName = ['']
    //   for (let i = 0; i < this.group.children.length; i++) {
    //     console.log(this.group.children[i])
    //     if (this.group.children[i] instanceof Three.Mesh) {
    //       // console.log(this.group.children[i])
    //       this.group.children[i].geometry.dispose()
    //       this.group.children[i].material.dispose()
    //       this.group.remove(this.group.children[i])
    //     }
    //     if (this.group.children[i] instanceof Three.Line) {
    //       // console.log(this.group.children[i])
    //       this.group.children[i].geometry.dispose()
    //       this.group.children[i].material.dispose()
    //       this.group.remove(this.group.children[i])
    //     }
    //   }
    // },

    addLabel(name, id, userPost) {
      const vm = new Vue({
        render: h =>
          h(tagInfo, { props: { name: name, id: id, userPost: userPost } })
      }).$mount()
      // vm.$el.style.marginTop = '3em'
      // vm.$el.style.marginLeft = '-3em'
      return vm.$el
    },
    // handleTabRemove(tab) {
    //   console.log(tab)
    //   this.activeName = 'error'
    // },
    //初始化场景、相机、灯光、渲染器
    initBase: function() {
      this.camera = new Three.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        // this.container.clientWidth / this.container.clientHeight,
        0.01,
        10000
      )

      this.camera.position.set(105, 75, 95)
      // this.camera.position.set(200, 0, 0)
      // this.camera.up.x = 0
      // this.camera.up.y = 1
      // this.camera.up.z = 0
      this.scene = new Three.Scene()
      let directionalLight = new Three.DirectionalLight(0xffffff, 0.5)
      directionalLight.position.set(0, 0, 0)
      this.scene.add(directionalLight)

      let ambient = new Three.AmbientLight(0xffffff, 1)
      ambient.position.set(0, 0, 0)
      this.scene.add(ambient)
      this.renderer = new Three.WebGLRenderer({ antialias: true, alpha: true })
      // this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      )
      this.renderer.setClearAlpha(0)
      // this.renderer.setPixelRatio(devicePixelRatio)
      this.container.appendChild(this.renderer.domElement)
      this.renderer.domElement.id = 'map'
      this.group = new Three.Group()
      this.group2 = new Three.Group()
      this.raycaster = new Three.Raycaster()
      this.mouse = new Three.Vector2()

      this.labelRenderer = new CSS2DRenderer()

      // this.labelRenderer.setSize(window.innerWidth, window.innerHeight)
      this.labelRenderer.setSize(
        this.container.clientWidth,
        this.container.clientHeight
      )
      this.labelRenderer.domElement.id = 'label'
      this.labelRenderer.domElement.style.position = 'absolute'
      this.labelRenderer.domElement.style.top = '0'
      this.labelRenderer.domElement.style.left = '0'
      // this.labelRenderer.domElement.style.pointerEvents = 'none'
      // document
      //   .getElementsByClassName('map3D')[0]
      //   .appendChild(this.labelRenderer.domElement)
      this.container.appendChild(this.labelRenderer.domElement)
    },
    // 初始化性能插件
    initStats: function() {
      this.stats = new Stats()
      this.stats.domElement.style.position = 'absolute'
      this.stats.domElement.style.zIndex = 0
      this.stats.domElement.style.left = '0px'
      this.stats.domElement.style.top = '0px'

      this.container.appendChild(this.stats.domElement)
    },

    createWorkSpace: function() {
      let that = this
      let manager = new Three.LoadingManager()
      new MTLLoader(manager)
        .setPath('/static/source/')
        .load(mapData.sceneMtlModel, function(materials) {
          materials.preload()
          new OBJLoader(manager)
            .setMaterials(materials)
            .setPath('/static/source/')
            .load(
              mapData.sceneObjModel,
              function(object) {
                object.matrixAutoUpdate = false
                object.frustumCulled = false
                object.traverse(function(child) {
                  child.matrixAutoUpdate = false
                  child.frustumCulled = false
                })
                // object.position.set(0, -2700, 0)
                object.updateMatrix()
                that.group.add(object)
              },
              onprogress,
              onerror
            )
        })
    },

    createFbxModel() {
      let that = this
      let loader = new FBXLoader().setPath('/static/source/')
      for (let i = 0; i < that.tagInfo.length; i++) {
        // let box = new Three.BoxGeometry(25, 100, 25)
        let box = new Three.BoxGeometry(50, 156, 50)
        let material1 = new Three.MeshLambertMaterial({
          color: 0x0000ff
        }) //材质对象
        let mesh = new Three.Mesh(box, material1)
        mesh.name = that.tagInfo[i].tagId
        mesh.visible = false
        mesh.position.y += 100
        that.group2.add(mesh)
        if (that.tagInfo[i].userPost !== '手推车') {
          loader.load(mapData.walkingFbxModel, function(object) {
            object.position.set(0, 0, 0)
            let mixer = new Three.AnimationMixer(object)
            that.animationAction[i] = mixer.clipAction(object.animations[0])
            object.traverse(function(child) {
              if (child.isMesh) {
                if (
                  that.tagInfo[i].status === 1 ||
                  that.tagInfo[i].buttonstatus === 1
                ) {
                  child.material.color.set(0xff0000)
                } else {
                  child.material.color.set(that.tagInfo[i].color)
                }
              }
            })
            that.group2.children[i].position.copy(object.position)
            that.group2.children[i].position.y += 78
            that.$nextTick(function() {
              let label = new CSS2DObject(
                that.addLabel(
                  that.tagInfo[i].userName,
                  that.tagInfo[i].tagId,
                  that.tagInfo[i]['userPost']
                )
              )
              label.visible = false
              label.position.copy(that.group2.children[i].position)

              that.group2.children[i].add(label)
            })
            that.group.add(object)
            that.animationAction[i].setDuration(1.3).play()
            mixer.name = that.tagInfo[i].tagId
            that.animationAction[i].getRoot().name = that.tagInfo[i].tagId
            that.animationAction[i].name = that.tagInfo[i].tagId
            that.animationAction[i].type = that.tagInfo[i].userPost
            console.log(that.animationAction)
          })
        } else {
          loader.load(mapData.handcartFbxModel, function(object) {
            let mixer = new Three.AnimationMixer(object)
            that.animationAction[i] = mixer.clipAction(object.animations[0])
            object.traverse(function(child) {
              if (child.isMesh) {
                if (
                  that.tagInfo[i].status === 1 ||
                  that.tagInfo[i].buttonstatus === 1
                ) {
                  child.material.color.set(0xff0000)
                } else {
                  child.material.color.set(that.tagInfo[i].color)
                }
              }
            })
            that.group2.children[i].position.copy(object.position)
            that.group2.children[i].scale.set(1, 0.5, 1)
            that.group2.children[i].position.y += 35

            that.$nextTick(function() {
              let label = new CSS2DObject(
                that.addLabel(
                  that.tagInfo[i].userName,
                  that.tagInfo[i].tagId,
                  that.tagInfo[i]['userPost']
                )
              )
              label.visible = false
              label.position.copy(that.group2.children[i].position)

              that.group2.children[i].add(label)
            })
            that.group.add(object)
            that.animationAction[i].setDuration(1.3).play()
            mixer.name = that.tagInfo[i].tagId
            that.animationAction[i].getRoot().name = that.tagInfo[i].tagId
            that.animationAction[i].name = that.tagInfo[i].tagId
            that.animationAction[i].type = that.tagInfo[i].userPost

            console.log(that.animationAction)
          })
        }
      }
      // this.$nextTick(() => {
      //   console.log('finished')
      //   this.$bus.$emit('showCharts','1')
      // })
    },

    getPosition: function(animationAction) {
      for (let i = 0; i < this.tagPosition.length; i++) {
        let object = animationAction[i].getRoot()
        this.group2.children[i].position.copy(object.position)
        this.group2.children[i].position.y += 50
        // this.group2.children[i].children[0].position.copy(this.group2.children[i].position)
        // this.group2.children[i].children[0].position.set(
        //   this.tagPosition[i].position[0] * 100,
        //   0,
        //   this.tagPosition[i].position[1] * -100
        // )
        this.changeOrientation(
          object,
          i,
          this.tagPosition[i].position[0] * 100,
          0,
          this.tagPosition[i].position[1] * -100
        )
      }
    },

    changeOrientation: function(object, i, x, y, z) {
      // let delta = this.clock.getDelta();
      //以下代码在多段路径时可重复执行
      let mtx = new Three.Matrix4() //创建一个4维矩阵
      mtx.lookAt(object.position.clone(), { x, y, z }, object.up) //设置朝向
      // mtx.multiply(new Three.Matrix4().makeRotationFromEuler(new Three.Euler(-Math.PI / 2, 0, Math.PI)));
      mtx.multiply(
        new Three.Matrix4().makeRotationFromEuler(
          new Three.Euler(0, Math.PI, 0)
        )
      )
      let toRot = new Three.Quaternion(
        TWEEN.Easing.Linear.None
      ).setFromRotationMatrix(mtx) //计算出需要进行旋转的四元数值
      if (
        Math.abs(object.position.x - x) >= 10 ||
        Math.abs(object.position.z - z) >= 10
      ) {
        //     if(this.mixer_man) {
        //         this.mixer_man.update(10*delta);
        //     }
        this.animationAction[i].play()
        new TWEEN.Tween(object.position)
          .to(
            {
              x,
              y,
              z
            },
            10
          )
          .easing(TWEEN.Easing.Quartic.InOut)
          .onUpdate(function() {
            object.quaternion.slerp(toRot, 0.4)
          })
          .start()
      } else {
        this.animationAction[i].stop()
      }
      // object.position.set(x,y,z);
      // console.log(object.position);
    },

    createTrackAnimation() {
      for (let i in this.animationAction) {
        this.animationAction[i].getRoot().visible = false
      }
      for (let i = 0; i < this.group2.children.length; i++) {
        this.group2.children[i].children[0].visible = false
      }
      for (let i = 0; i < this.tabsInfo.positionTracks.length; i++) {
        this.positionTracks.push(
          new Three.Vector3(
            this.tabsInfo.positionTracks[i][0] * 100,
            50,
            this.tabsInfo.positionTracks[i][1] * -100
          )
        )
      }
      let box = new Three.BoxGeometry(20, 100, 20)
      let material1 = new Three.MeshLambertMaterial({
        color: 0x0000ff
      }) //材质对象
      let mesh = new Three.Mesh(box, material1)
      mesh.name = 'Track'
      this.group.add(mesh)
      mesh.position.set(0, 50, 0)
      mesh.visible = false
      // 通过类CatmullRomCurve3创建一个3D样条曲线
      let curve = new Three.CatmullRomCurve3(this.positionTracks)
      // 样条曲线均匀分割100分，返回51个顶点坐标
      let points = curve.getPoints(this.tabsInfo.positionTimes.length - 1)
      console.log('points', points) //控制台查看返回的顶点坐标
      console.log(this.scene)
      let geometry = new Three.Geometry()
      // 把从曲线轨迹上获得的顶点坐标赋值给几何体
      geometry.vertices = points
      let material = new Three.LineBasicMaterial({
        color: 0xff0000
      })
      let line = new Three.Line(geometry, material)
      line.position.y -= 40
      line.visible = true
      this.group.add(line)

      let posArr = []
      points.forEach(elem => {
        posArr.push(elem.x, elem.y, elem.z)
      })
      // 创建一个和时间序列相对应的位置坐标系列
      let values = new Float32Array(posArr)
      // 创建一个帧动画的关键帧数据，曲线上的位置序列对应一个时间序列
      let posTrack = new Three.KeyframeTrack(
        '.position',
        this.tabsInfo.positionTimes,
        values
      )
      console.log(posTrack)
      let duration = 0.1
      let clip = new Three.AnimationClip('default', duration, [posTrack])
      console.log(this.group.children.slice(-1))
      // this.mixerTrack = new Three.AnimationMixer(this.group.children[this.group.children.length-1])
      this.mixerTrack = new Three.AnimationMixer(mesh)
      this.animationTrack = this.mixerTrack.clipAction(clip)
      this.animationTrack.loop = Three.LoopOnce
      console.log(this.tabsInfo.time)
      this.animationTrack.time = this.tabsInfo.time
      this.animationTrack.clampWhenFinished = true
      this.tabsInfo.confirmLoading = false
      this.tabsInfo.isSliderActive = true
      console.log(this.scene)
      console.log(this.animationTrack)
      console.log(this.mixerTrack)
    },

    removeTrackAnimation() {
      this.positionTracks = []
      for (let i in this.animationAction) {
        this.animationAction[i].getRoot().visible = true
      }
      for (let i = 0; i < this.group.children.length; i++) {
        console.log(this.group.children[i])
        if (this.group.children[i].name === 'Track') {
          // console.log(this.group.children[i])
          this.group.children[i].geometry.dispose()
          this.group.children[i].material.dispose()
          this.group.remove(this.group.children[i])
        }
        if (this.group.children[i] instanceof Three.Line) {
          // console.log(this.group.children[i])
          this.group.children[i].geometry.dispose()
          this.group.children[i].material.dispose()
          this.group.remove(this.group.children[i])
        }
      }
    },

    // 初始化模型
    initContent: function() {
      this.createWorkSpace()
      // let loader = new FBXLoader().setPath('/static/source/')
      // let that=this
      // loader.load(mapData.walkingFbxModel, function(object) {
      //   object.position.set(0, 0, 0)
      //   object.scale.set(0.6,0.6,0.6)
      //   console.log(object)
      //   that.group.add(object)
      // })
      this.group2.scale.set(0.05, 0.05, 0.05)
      this.group.scale.set(0.05, 0.05, 0.05)
      this.scene.add(this.group)
      this.scene.add(this.group2)
      console.log(this.scene)
    },

    // 初始化轨迹球控件
    initControls: function() {
      this.controls2 = new OrbitControls(
        this.camera,
        this.labelRenderer.domElement
      )
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      // this.controls.target = new Three.Vector3(8, 0, 0)
      // this.controls.target = new Three.Vector3(0, 0, 0)
      this.controls.enableDamping = true
      this.controls.dampingFactor = 0.3
      // 视角最小距离
      this.controls.minDistance = 60
      // 视角最远距离
      this.controls.maxDistance = 200
      // 最大角度
      this.controls.maxPolarAngle = Math.PI / 2.2

      this.controls.enablePan = true
      this.controls.panSpeed = 1
    },
    // 更新控件
    update: function() {
      TWEEN.update()
      this.controls.update()
      this.controls2.update()
      // this.stats.update()
    },
    // 初始化
    init: function() {
      this.initBase()
      this.initContent()
      this.initControls()
      // this.initStats()
      window.addEventListener('mousemove', this.onDocumentMouseMove, false)
      // window.onbeforeunload = function(event) {
      //   console.log('关闭WebSocket连接！')
      //   this.webSocket.close()
      // }
    },

    //鼠标移动
    onDocumentMouseMove(event) {
      if (this.show3D) {
        this.mouse.x =
          ((event.clientX - this.container.getBoundingClientRect().left) /
            this.container.clientWidth) *
            // window.innerWidth) *
            2 -
          1
        this.mouse.y =
          -(
            (
              (event.clientY - this.container.getBoundingClientRect().top) /
              this.container.clientHeight
            )
            // window.innerHeight
          ) *
            2 +
          1
        this.raycaster.setFromCamera(this.mouse, this.camera)
        //返回选中的外部模型对象
        let intersects = this.raycaster.intersectObjects(this.group2.children)
        this.$nextTick(() => {
          if (intersects.length > 0 && this.tabsInfo.isSliderActive === false) {
            // console.log(intersects[0].object.children[0])
            // intersects[0].object.children[0].visible = !intersects[0].object
            //   .children[0].visible
            intersects[0].object.children[0].visible = true
          } else {
            for (let i = 0; i < this.group2.children.length; i++) {
              this.group2.children[i].children[0].visible = false
            }
          }
        })
      }
    },

    animate() {
      if (this.show3D) {
        let delta = this.clock.getDelta()
        for (let i = 0; i < this.animationAction.length; i++) {
          if (this.animationAction[i]) {
            this.animationAction[i].getMixer().update(delta)
          }
        }

        if (this.mixerTrack) {
          this.mixerTrack.update(delta)
        }
        // this.$nextTick(() => {
          this.update()
          this.renderer.render(this.scene, this.camera)
          this.labelRenderer.render(this.scene, this.camera)
        // })

        this.rafID = requestAnimationFrame(this.animate)
      }
    }
  },
  created() {
    // let loader = new FBXLoader().setPath('/static/source/')
    // loader.load(mapData.walkingFbxModel, function(object) {
    //   object.position.set(0, 0, 0)
    //   object.scale.set(100,100,100)
    //   console.log(object)
    //   this.group.add(object)
    //   console.log(this.group)
    // })
    // this.initWebsocket()
    // this.createFbxModel()
  },
  mounted() {
    this.container = document.getElementById('container')
    console.log(this.container)
    this.init()
    // if (this.show3D) {
    this.animate()
    // }
    this.$_resizeHandler = this.handleResize()
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },

  beforeDestroy() {
    cancelAnimationFrame(this.rafID)
    this.group.traverse(function(item) {
      if (item instanceof Three.Mesh) {
        item.geometry.dispose() //删除几何体
        item.material.dispose() //删除材质
      }
    })
    this.renderer = null
    this.scene.traverse(child => {
      child = null
    })
    this.scene = null
    this.mouse = null
    this.camera = null
    this.raycaster = null
    // this.$bus.$off('showCharts')

    window.removeEventListener('mousemove', this.onDocumentMouseMove)
  },
  watch: {
    'tabsInfo.time': function(val) {
      if (this.animationTrack) {
        this.animationTrack.time = val //操作对象设置开始播放时间
        this.animationTrack.getClip().duration = this.animationTrack.time //剪辑对象设置播放结束时间
        console.log(this.animationTrack.time)
        console.log(this.animationTrack.getClip().duration)
        this.animationTrack.play() //开始播放
      }
    },
    'tabsInfo.showTrack': function(val) {
      console.log(val)
      for (let i = 0; i < this.group.children.length; i++) {
        if (this.group.children[i] instanceof Three.Line) {
          if (val === true) {
            this.group.children[i].visible = true
          } else {
            this.group.children[i].visible = false
          }
        }
      }
    },
    'tabsInfo.positionTracks': {
      handler() {
        if (this.show3D) {
          if (this.positionTracks.length > 1) {
            this.removeTrackAnimation()
            this.createTrackAnimation()
          } else {
            this.createTrackAnimation()
          }
        }
      },
      deep: true
    },
    'tabsInfo.isSliderActive': function(val) {
      if (this.show3D) {
        if (val === false) {
          this.removeTrackAnimation()
        }
      }
    },
    tagPosition: {
      handler() {
        if (this.show3D) {
          for (let i in this.tagPosition) {
            if (this.animationAction[i]) {
              let object = this.animationAction[i].getRoot()
              if (this.animationAction[i].type !== '手推车') {
                this.group2.children[i].position.copy(object.position)
                this.group2.children[i].position.y += 78
              } else {
                this.group2.children[i].position.copy(object.position)
                this.group2.children[i].position.y += 35
              }
              this.group2.children[i].children[0].position.copy(object.position)
              this.group2.children[i].children[0].position.x =
                this.group2.children[i].children[0].position.x / 20
              this.group2.children[i].children[0].position.y =
                this.group2.children[i].children[0].position.x / 20
              this.group2.children[i].children[0].position.z =
                this.group2.children[i].children[0].position.x / 20
              this.group2.children[i].children[0].position.y += 120
              this.changeOrientation(
                object,
                i,
                this.tagPosition[i].position[0] * 100,
                0,
                this.tagPosition[i].position[1] * -100
              )
            }
          }
        }
      },
      deep: true
    },
    tagInfo: {
      handler() {
        this.createFbxModel()
      },
      deep: true
    },
    warningInfo: function(val, oldVal) {
      if (this.show3D) {
        let id = this.warningInfo.id
        let that = this
        if (!isEqual(val, oldVal)) {
          console.log(val)
          console.log(oldVal)
          for (let i = 0; i < that.animationAction.length; i++) {
            if (id === that.animationAction[i].getRoot().name) {
              if (that.warningInfo.status === 0) {
                that.animationAction[i].getRoot().traverse(function(child) {
                  if (child.isMesh) {
                    child.material.color.set(that.tagInfo[i].color)
                  }
                })
              } else if (that.warningInfo.status === 1) {
                that.animationAction[i].getRoot().traverse(function(child) {
                  if (child.isMesh) {
                    child.material.color.set(0xff0000)
                  }
                })
              } else if (that.warningInfo.status === 2) {
                that.animationAction[i].getRoot().traverse(function(child) {
                  if (child.isMesh) {
                    child.material.color.set(0xff0000)
                  }
                })
              } else if (that.warningInfo.status === 3) {
                that.animationAction[i].getRoot().traverse(function(child) {
                  if (child.isMesh) {
                    child.material.color.set(that.tagInfo[i].color)
                  }
                })
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped>
#office {
  position: relative;
  width: 100%;
  height: 100%;
}
#container {
  display: block;
  width: 100%;
  /* height: 750px; */
  overflow: hidden;
  /* background: url('~@/assets/map_background.jpg') center no-repeat; */
  background: #072152;
  background-size: cover;
  position: relative;
}

.item {
  margin-bottom: 10px;
}
.tap {
  position: absolute;
  background-color: #2d7024;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  opacity: 0.5;
  font-size: 4px;
  color: aqua;
  width: 36px;
  height: 44px;
  padding: 1px 1px 1px;
}
</style>
